<template>
  <div class="address-check">
    <i class="fa fa-square-o check-square" aria-hidden="true" v-if="!value" @touchstart="toggleStatus"></i>
    <i class="fa fa-check check-form-active" aria-hidden="true" @touchstart="toggleStatus" v-else></i>
  </div>
</template>

<script>
  export default {
    name: 'AddressCheck',
    props: {
      value: {
        type: Boolean
      },
      index: {
        type: Number
      }
    },
    methods: {
      toggleStatus () {
        this.value = !this.value
        this.$emit('input', this.value)
        this.$emit('change', this.index)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/px2rem";
  @import "../assets/css/variable";
  .address-check{
      width:100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .check-form-active{
    color: $theme-color-deep;
  }

  .check-square{
    color: #e5e5e5;
  }
</style>
